const { merge } = require('webpack-merge')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const portfinder = require('portfinder');

const BaseConfig = require('./webpack.config.base')
const { DEV_PROXY, SERVER_HOST, SERVER_PORT } = require("./constant");


const DevWebpackConfig = merge(BaseConfig, {
  mode: 'development',
  devtool: 'eval-source-map', // 列和行都可以看到
  // 开发环境使用内存缓存
  cache: { type: 'memory' },
  // 开发环境代理
  devServer: {
    // server: 'https',
    host: SERVER_HOST, // host 127.0.0.1
    port: SERVER_PORT, // 端口号
    compress: true, // gzip压缩
    open: true,  // 告诉 dev-server 在服务器已经启动后打开默认的浏览器
    hot: true, // 启用服务热替换配置
    // 项目使用了react-router-dom的BrowserRouter,所以此项必须设置为true。否则会导致配置的路由404
    // 也就是说，当使用h5的history API时，必须将 historyApiFallback设置为true。
    historyApiFallback: true,
    client: {
      logging: 'error', // error信息，才会打印
      progress: true, // 在浏览器中以百分比显示编译进度。
      overlay: { // 当出现编译错误或警告时，在浏览器中显示全屏覆盖
        errors: true,
        warnings: false,
      },
      // 告诉 dev-server 它应该尝试重新连接客户端的次数。当为 true 时，它将无限次尝试重新连接。
      reconnect: true,
    },
    // 代理---处理跨域转发
    proxy: require(DEV_PROXY),
  },
  // Webpack 可以监听文件变化，当它们修改后会重新编译。
  watchOptions: { // 一组用来定制 watch 模式的选项：
    ignored: /node_modules/, // 排除node_modules
    aggregateTimeout: 600, // 第一个文件更改，会在重新构建前增加延迟。
  },
  plugins: [
    // 开发环境启用HMR
    new ReactRefreshWebpackPlugin({
      overlay: false,
    }),
  ],
  optimization: {
    providedExports: true,
    usedExports: true,
  },
})


module.exports = new Promise((resolve, reject) => {
  /**
   * @description 解决端口占用
   * @params { number } port 默认8080端口，若被占用，重复+1，直到找到可用端口或到stopPort才停止
   * @params { number } stopPort maximum port 最大端口号
   */
  portfinder.getPort({ port: 3000, stopPort: 65535, },
    (err, port) => {
      if (err) {
        reject(err)
        return
      }
      DevWebpackConfig.devServer.port = port
      resolve(DevWebpackConfig)
    }
  )
})
